<template>
  <div class="search-for-assets">
    <img :src="seachbgImg" alt="" class="bg-img">
    <div class="search-box">
        <div class="input-box">
            <div class="text-box">
                <span class="text" @click="show = true">{{typeText}}</span>
            </div>
            <van-search v-model="value" class="search-input" @focus="focusSearch" placeholder="请输入搜索关键词" />
        </div>
        <div class="btn-box">
            <div class="organization-btn">
                <img :src="organizationImg" alt="" class="organization-img">
                按组织架构查看
            </div>
            <img :src="mapBtn" alt="" class="map-img">
        </div>
    </div>
    <van-tabs v-model="active"  class="tab">
        <van-tab title="重点关注" name="1"></van-tab>
        <van-tab title="附近资产" name="2"></van-tab>
    </van-tabs>
    <div class="type-box">
        <span :class="typeKey == 1 ? 'type-item type-active' : 'type-item'" @click="typeKey = 1">资产</span>
        <span :class="typeKey == 2 ? 'type-item type-active' : 'type-item'" @click="typeKey = 2">项目</span>
    </div>
    <listComponent></listComponent>
    <van-action-sheet
            v-model="show"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @select="onSelect"
        />
  </div>
</template>

<script>
import listComponent from "./components/list.vue"
export default {
  name: 'searchForAssets',
  components: {listComponent},
  data() {
    return {
        seachbgImg: require('@/assets/searchbg.png'),
        organizationImg: require('@/assets/organization.png'),
        mapBtn: require('@/assets/mapBtn.png'),
        value: '',
        show: false,
        typeText: '按名称',
        typeKey: 1,
        actions: [{ name: '按名称', value: 1 }, { name: '按位置', value: 2 }],
        active: '1'
    }
  },
  computed: {},
  watch: {},
  created () {},
  methods: {
    focusSearch() {
        this.$router.push({path: '/searchPage'})
    },
    onSelect(action) {
        console.log(action);
        this.typeText = action.name
        this.focusSearch()
    }
  }
}
</script>

<style lang='less' scoped>
.search-for-assets {
    background-color: #F5F6F8;
    height: 100%;
    .bg-img {
        height: 220px;
        width: 100%;
    }
    .search-box {
        height: 170px;
        margin: -19px 12px 15px 12px;
        width:calc(100% - 24px);
        position: relative;
        border-radius: 10px;
        background-color: #fff;
        padding: 12px;
        .input-box {
            display: flex;
            align-items: center;
            border-radius: 10px;
            border: 1px solid #E5E5E5;
            margin-bottom: 40px;
            .text-box {
                width: 100px;
                font-size: 16px;
                padding: 0 12px;
                position: relative;
                .text {
                    color: #171E33 ;
                }
                .text::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 12px;
                    transform: translateX(-50%);
                    width: 0;
                    height: 0;
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-top: 6px solid #171E33;
                }
            }
        }
        .search-input {
            height: 46px;
            padding: 0;
            flex: 1;
            background-color: #fff;
            border-radius: 10px;
            .van-search__content {
                background-color: #fff;
                border-left: 1px solid #E5E5E5;
            }
        }
        .btn-box {
            display: flex;
            align-items: center;
            justify-content: space-around;
            .organization-btn {
                width: 190px;
                height: 44px;
                background-color: #3772FF;
                border-radius: 10px;
                display: flex;
                align-items: center;
                color: #fff;
                font-size: 15px;
                .organization-img {
                    width: 20px;
                    height: 24px;
                    margin-left: 23px;
                    margin-right: 10px;
                }
            }
            .map-img {
                width: 124px;
                height: 44px;
            }
        }
    }
    .tab {
        /deep/.van-tabs__wrap {
            width: 200px;
        }
        /deep/.van-tabs__line {
            width: 40px;
            height: 10px;
            background-color: #F5F6F8;
            background-image: url("~@/assets/underscore.png");
            background-size: contain;
        }
        /deep/.van-tab--active {
            font-size: 16px;
            color: #3772FF;
            font-weight: 800;
        }
        /deep/.van-tabs__nav {
            background-color: #F5F6F8;
        }
    }
    .type-box {
        .type-item {
            margin: 15px 16px 0 14px;
            border-radius: 14px;
            width: 60px;
            height: 28px;
            line-height: 28px;
            display: inline-block;
            font-size: 14px;
            text-align: center;
            color: #4C505A;
            background-color: #DEE3ED;
        }
        .type-active {
            color: #3772FF;
            background-color: #DDE6FF;
        }
    }
}
</style>
